<template>
    <keep-alive include="List">
      <component :is="CurrentCompoent[activePage]" ref="pageRef" :isZF="true">
        <template v-slot:back>
          <el-button class="form-back-btn" type="primary" @click="back">
            返回
          </el-button>
        </template>
      </component>
    </keep-alive>
  </template>
  
  <script setup>
  import {
    ref,
    reactive,
    provide,
    onBeforeMount,
    markRaw,
    defineAsyncComponent
  } from 'vue'
  
  const activePage = ref(null)
  const CurrentCompoent = reactive({
    list: markRaw(
      defineAsyncComponent(() =>
        import('./components/list.vue')
      )
    )
  })
  const changeComponents = val => {
    activePage.value = val
  }
  
  const back = () => {
    changeComponents('list')
  }
  
  provide('changeComponents', changeComponents)
  
  onBeforeMount(() => {
    activePage.value = 'list'
  })
  </script>
  <style scoped></style>
  